<template>
  <div class="date-picker-item">
    <el-date-picker
      v-model="pickerValue"
      :type="type"
      :placeholder="placeholder"
      :value-format="valueFormat"
      @change="handleChange"
      size="small"
      :clearable="false"
    ></el-date-picker>
  </div>
</template>

<script setup>
import {defineProps, defineEmits, ref, watch, computed} from 'vue';

const props = defineProps({
  modelValue: {
    type: [Date, String, Array],
    required: true
  },
  type: {
    type: String,
    required: true,
    validator: (value) => ['year', 'month', 'monthrange'].includes(value),
    default: 'year'
  },
  placeholder: {
    type: String,
    required: true
  }
});

const format = computed(() => {
  switch (props.type) {
    case 'year':
      return 'YYYY';
    case 'month':
      return 'YYYY-MM';
    case 'monthrange':
      return 'YYYY-MM';
    default:
      return '';
  }
});

const valueFormat = computed(() => {
  switch (props.type) {
    case 'year':
      return 'YYYY';
    case 'month':
      return 'YYYY-MM';
    case 'monthrange':
      return 'YYYY-MM';
    default:
      return '';
  }
});

const emit = defineEmits(['update:modelValue']);

const pickerValue = ref(null);

watch(() => props.modelValue, (newValue) => {
  pickerValue.value = newValue
});

const handleChange = (value) => {
  emit('update:modelValue', value);
};
</script>
<style scoped lang="less">
:deep(.house-property-sales-date .el-input__inner) {
  background: #001A35;
  box-shadow: inset 0px 0px 8px 0px #3D7FFF;
  border: 1px solid #0839A7;
  color: white;
  border-radius: 8px;
  padding: 6px 12px;
}

:deep(.house-property-sales-date .el-input__prefix),
:deep(.house-property-sales-date .el-input__suffix) {
  color: white;
}

.date-picker-item {
  /deep/ .el-date-editor {
    width: 100%;

    .el-input__wrapper {
      background: #001a35;
      box-shadow: inset 0 0 0.04167rem 0 #3d7fff;
      border-radius: 0.04167rem;
      border: 0.00521rem solid #0839a7;

      .el-input__inner {
        color: white;
      }

      .el-range-input, .el-range-separator {
        color: white;
      }
    }
  }

  /deep/ .el-range-editor {
    background: #001a35;
    box-shadow: inset 0 0 0.04167rem 0 #3d7fff;
    border-radius: 0.04167rem;
    border: 0.00521rem solid #0839a7;

    .el-range-input, .el-range-separator {
      color: white;
    }
  }
}
</style>